<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>history API 演示</title>
	<style>
		li{
			cursor: pointer;
			width: 200px;
			height: 30px;
			line-height: 30px;
			font-size: 26px;
			list-style: none;
			border: 1px solid skyblue;
			text-align: center;
			margin-bottom: 10px;
		}
		output{
			display: block;
			width: 300px;
			height: 100px;
			border: 1px solid deepskyblue;
			font-size: 30px;
			color: purple;
		}
	</style>
</head>
<body>
	<ul>
		<li>信息1</li>
		<li>信息2</li>
		<li>信息3</li>
	</ul>
	<p>加载的内容如下：</p>
	<output class="result"></output>
	
	<script src="https://cdn.bootcss.com/jquery/2.1.1-rc2/jquery.js"></script>
	<script>
		$(function() {
			$("li").on('click',function() {
				var index = $(this).index() + 1;
				$.ajax({
					type:"GET",
					url:index + ".json",
					dataType:'json',
					success:function(data) {
						$(".result").html(data.data);
						
						var state = {
							//title  url 
						}
						document.title = data.title;
						history.pushState(state,null,location.href.split("?")[0] + "?order=" + data.order);
						console.log(history.state)
					}
				});
			})
		})
	</script>
	
</body>
</html>